<template>
  <el-dialog
    title="采购"
    :before-close="cancel"
    :visible.sync="show"
    width="900px"
    append-to-body
  >
    <div>
      <el-form
        ref="purchaseRef"
        :model="form"
        :rules="rules"
        size="small"
        label-width="100px"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <!-- 采购类型 1-国内采购 2-酒水采购 3-日本当地采购 -->
            <el-form-item :label="$t('采购类型')" prop="type">
              <el-select style="width: 100%" v-model="form.type">
                <el-option
                  :label="item.label"
                  :value="+item.value"
                  v-for="(item, index) in typeList"
                  :key="index"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="汇率">
              <b>{{ exchangeRate }}</b>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="耗材编号">
              {{ form.cesNo }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('采购数量')" prop="num">
              <el-input-number
                @change="setSkuUnitPrice"
                :precision="0"
                style="width: 100%"
                v-model="form.num"
                controls-position="right"
                :min="1"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="12" style="padding-right: 10px">
            <el-form-item label="付款总额" prop="priceTotal">
              <el-input
                type="number"
                @change="setInfo"
                style="width: 100%"
                placeholder="请输入"
                v-model="form.priceTotal"
                class="input-with-select"
              >
                <!-- 付款总价单位 1-RMB 2-JPY 3-USD -->
                <el-button slot="append">
                  <el-select
                    @change="handleExchangeRate"
                    style="width: 100px"
                    v-model="form.priceUnit"
                  >
                    <el-option label="RMB" :value="1" />
                    <el-option label="JPY" :value="2" />
                    <el-option label="USD" :value="3" />
                  </el-select>
                </el-button>
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6" style="padding-right: 0px">
            <el-form-item
              label="总货值"
              label-width="70px"
              prop="cesTotalAmount"
            >
              <el-input
                disabled
                style="width: 100%"
                v-model="form.cesTotalAmount"
              >
                <template slot="suffix">JPY</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="50px" label="单价" prop="cesUnitPrice">
              <el-input
                disabled
                style="width: 100%"
                v-model="form.cesUnitPrice"
              >
                <template slot="suffix">JPY</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="采购链接" prop="purchaseLink">
              <el-input v-model="form.purchaseLink" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="采购备注">
              <el-input :rows="4" type="textarea" v-model="form.remark" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 采购链接 3个 -->
        <div style="padding: 0px 0px 20px 30px">
          <el-descriptions :column="1" border>
            <el-descriptions-item label="采购链接1">
              <el-link
                :href="formData.purchaseLink1"
                target="_blank"
                type="success"
              >
                {{ formData.purchaseLink1 }}
              </el-link>
            </el-descriptions-item>
            <el-descriptions-item label="采购链接2">
              <el-link
                :href="formData.purchaseLink2"
                target="_blank"
                type="success"
              >
                {{ formData.purchaseLink2 }}
              </el-link>
            </el-descriptions-item>
            <el-descriptions-item label="采购链接3">
              <el-link
                :href="formData.purchaseLink3"
                target="_blank"
                type="success"
              >
                {{ formData.purchaseLink3 }}
              </el-link>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getConversionRateList } from "@/api/purchasingManage/manufacturerPurchaseOrder";
import { addSkuConsumablePurchase } from "@/api/distribution/sku/skuConsumable";
import { useDict } from "@/utils/useDict";
export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  props: {
    /**
     * formData
     */
    formData: {
      type: Object,
      required: true,
    },
    /**
     * 控制显示隐藏
     */
    show: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  data() {
    return {
      typeList: [],
      form: {
        type: 1,
        priceUnit: 1,
        priceTotal: null,
        cesTotalAmount: null,
        num: 1,
        cesTotalAmount: 0,
        cesUnitPrice: 0,
        cesId: "",
        cesNo: "",
      },
      /**汇率 */
      exchangeRate: "",
      /**汇率 */
      exchangeRateList: [],

      rules: {
        type: [{ required: true, message: "请输入", trigger: "blur" }],
        num: [{ required: true, message: "请输入", trigger: "blur" }],
        priceTotal: [
          { required: true, message: "请输入数字类型", trigger: "blur" },
        ],
        cesTotalAmount: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        cesUnitPrice: [{ required: true, message: "请输入", trigger: "blur" }],
        purchaseLink: [{ required: true, message: "请输入", trigger: "blur" }],
      },
    };
  },
  watch: {
    show: function (newValue) {
      if (newValue) {
        this.resetForm();
        console.log(` ==>`, JSON.parse(JSON.stringify(this.formData)));
        this.form.cesId = this.formData.id;
        this.form.cesNo = this.formData.cesNo;
        this.getTypeList();
        this.getExchangeRate();
      }
    },
  },
  methods: {
    resetForm() {
      this.form = {
        type: 1,
        priceUnit: 1,
        priceTotal: null,
        cesTotalAmount: null,
        num: 1,
        cesTotalAmount: 0,
        cesUnitPrice: 0,
        cesId: "",
        cesNo: "",
      };
    },
    handleSubmit() {
      this.$refs["purchaseRef"].validate((valid) => {
        if (valid) {
          addSkuConsumablePurchase(this.form).then((res) => {
            const { code, data, msg } = res;
            if (code === 200) {
              this.$message({ type: 'success', message: msg})
;
              this.cancel();
              this.$emit("success");
            }
          });
        }
      });
    },
    /**
     * 获取采购类型
     */
    getTypeList() {
      useDict("purchase_type").then((res) => {
        const { purchase_type } = res;
        this.typeList = purchase_type;
      });
    },

    setSkuUnitPrice(num) {
      if (this.form.cesUnitPrice)
        this.form.cesUnitPrice = (
          this.form.cesTotalAmount / this.form.num
        ).toFixed(4);
    },
    setInfo(e) {
      this.form.cesTotalAmount = (
        +this.form.priceTotal * +this.exchangeRate
      ).toFixed(4);
      this.form.cesUnitPrice = (
        this.form.cesTotalAmount / this.form.num
      ).toFixed(4);
    },
    /**获取汇率 */
    getExchangeRate() {
      getConversionRateList().then((res) => {
        this.exchangeRateList = res.data;
        const cnRate = res.data?.filter((i) => i.baseCode == "CNY");
        this.exchangeRate = cnRate[0].conversionRate;
      });
    },
    /**设置汇率 */
    handleExchangeRate(id) {
      // 付款总价单位 1-RMB 2-JPY 3-USD
      if (id == 1) {
        const cnRate = this.exchangeRateList?.filter(
          (i) => i.baseCode == "CNY"
        );
        this.exchangeRate = cnRate[0].conversionRate;
      }
      if (id == 2) {
        this.exchangeRate = 1;
      }
      if (id == 3) {
        const cnRate = this.exchangeRateList?.filter(
          (i) => i.baseCode == "USD"
        );
        this.exchangeRate = cnRate[0].conversionRate;
      }

      // 重新计算  总货值  单价
      this.form.cesTotalAmount = (
        +this.form.priceTotal * +this.exchangeRate
      ).toFixed(4);
      this.form.cesUnitPrice = (
        this.form.cesTotalAmount / this.form.num
      ).toFixed(4);
    },

    cancel() {
      this.$emit("update:show", false);
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-descriptions-item__cell {
  width: 200px !important;
}
</style>
